<html>
<header>
<style>
body {
  background: #ddd;
}

.button {
  width: 20px;
  height: 150px;  
  border-bottom: 2px solid #eee; 
   border-radius:100px ; 
   float:left;
   margin-left:30px;
     box-shadow: inset  0px 10px 16px  rgba(0,0,0,0.2);
 background-image: -webkit-linear-gradient(top, #999, #d0d0d0 100% )
}

.butt {
  position: absolute;
  margin-left:-5px;
  width: 30px;
  height: 30px; 
  cursor: pointer;
  text-align: center ; 
  border-radius: 50px;  
  background-image: -webkit-radial-gradient(#bf38ff 20%, #922ec4 , #000 );
  background-repeat: no-repeat;
  
  -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 8px,inset 0px -2px 6px #444;  
  -webkit-transition: all .1s ease(0.0.0.0);
  -moz-transition: all .1s ease-in;
  -ms-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.butt:before{
 content:" ";
display:block;
width: 3px;
height: 5px;

background:rgba(234,244,243,1);
 border-top-left-radius:2px;
border-top-right-radius:3px;
border-bottom-left-radius:2px;
border-bottom-right-radius:3px;
margin-top:5px;
margin-left:6px;
position:absolute;
-webkit-transform:rotate(43deg);
-moz-transition: rotate(43deg);
-ms-transition: rotate(43deg);
-o-transition: rotate(43deg);
transition: rotate(43deg);
box-shadow: 0px 0px 3px #fff,
           inset 0.7px  0px  0.7px  #c6e2b1;
              
}

  .butt:active {

 -webkit-transform: translate(0em,7.5em);
}
.first{
background:#a939ba;
}

.first:hover {
 
    box-shadow: 0px 2px 3px #1d420c,
              inset  1px  3px  4px  #973b92,
              inset  -5px  -6px  10px  #f7d7eb,
              inset  0px  5px  8px  #d6b1e2;
  
}
.second{
   background:#75ba39;
}
.second:hover {
 
    box-shadow: 0px 2px 3px #1d420c,
              inset  1px  3px  4px  #5b973b,
              inset  -5px  -6px  10px  #d7f6f7,
              inset  0px  5px  8px  #c6e2b1;
  
}

.third{
 background:#39bab5;
}
.third:hover {
 
    box-shadow: 0px 2px 3px #1d420c,
              inset  1px  3px  4px  #3b9782,
              inset  -5px  -6px  10px  #d7d9f7,
              inset  0px  5px  8px  #b1e2de;
  
}
.fourth{ background:#ba9a39;}
.fourth:hover{
box-shadow: 0px 2px 3px #1d420c,
              inset  1px  3px  4px  #42370c,
              inset  -5px  -6px  10px  #eef7d7,
              inset  0px  5px  8px  #e2c9b1;
}
.fifth{background:#ba3970;}
.fifth:hover{
     box-shadow: 0px 2px 3px #1d420c,
              inset  1px  3px  4px  #420c22,
              inset  -5px  -6px  10px  #f7d9d7,
              inset  0px  5px  8px  #e2b1ce;
}




</style>

</head>
<body>
  <div class="button">
     <a class="butt first"></a>
  </div>
  <div class="button">
     <a class="butt second"></a>
  </div>
  <div class="button ">
     <a class="butt third"></a>
  </div>
  <div class="button ">
     <a class="butt fourth"></a>
  </div>
  <div class="button ">
     <a class="butt fifth"></a>
  </div>

</body>
</html>
